<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back"><image class="back" src="/static/img/back.png"></image></view>问题详情
		</view>
		
		<view class="top-bg"></view>
		
		<view class="detail">
			<view class="ac tab">
				<view class="type" :class="{on:tab == 0}" @click="tab=0">基本信息</view><view class="type" :class="{on:tab == 1}" @click="handleClick">流转记录</view>		
			</view>
			<u-cell-group v-show="tab == 0">
				<u-cell-item title="检查时间:" :value="detail.JC_DATE" :arrow="false"></u-cell-item>
				<u-cell-item title="检查部门:" :value="detail.JCORGNAME" :arrow="false"></u-cell-item>
				<u-cell-item title="检  查 人:" :value="detail.JCPERSONNAME" :arrow="false"></u-cell-item>
				<u-cell-item title="问题来源:" :value="detail.WT_SOURCE" :arrow="false"></u-cell-item>
				<u-cell-item title="问题等级:" :value="detail.WT_LEVEL" :arrow="false"></u-cell-item>
				<u-cell-item title="等级详情:" :value="detail.LEVEL_DETAIL" :arrow="false"></u-cell-item>
				<u-cell-item title="问题类别:" :value="detail.WT_CATEGORY" :arrow="false"></u-cell-item>
				<u-cell-item title="站 /区间:" :value="detail.BELONGSTATIONNAME" :arrow="false"></u-cell-item>
				<u-cell-item title="责任部门:" :value="detail.ZRORGNAME" :arrow="false"></u-cell-item>
				<u-cell-item title="责  任 人:" :value="detail.ZRPERSONNAME" :arrow="false"></u-cell-item>
				<u-cell-item title="设备类型:" :value="detail.EQTTYPENAME" :arrow="false"></u-cell-item>
				<u-cell-item title="设备:" :value="detail.EQTNAME" :arrow="false"></u-cell-item>
				<u-cell-item title="纳入考核:" :value="detail.IS_EXAM == 1 ? '是' : '否'" :arrow="false"></u-cell-item>
				<u-cell-item title="问题内容:" :value="detail.WT_CONTENT" :arrow="false"></u-cell-item>
				<u-cell-item title="整改期限:" :value="detail.ZG_DATE" :arrow="false"></u-cell-item>
				<u-cell-item title="整改要求:" :value="detail.ZG_REQUEST" :arrow="false"></u-cell-item>
			</u-cell-group>
			<view class="job-detail" v-show="tab == 0">附件：</view>
			<view class="photo" v-show="tab == 0">
				<!-- <u-upload :action="action" @on-success='backImg'></u-upload> -->
				<view class=" img-item"><img class="images" v-for='(item,index) in imageList' :src="showSrc(item)" :key='index' style='margin-right: 10px;' @click="zoomPic(item)"></img></view>
			</view>
			
			<view v-show="tab == 1" style="margin-top: 20px;">
				<view v-if="!roamData.verifyDate&&!roamData.handleDate&&!roamData.jcDate" style="text-align: center;">该问题没有流转记录</view>
				<u-time-line>
					<u-time-line-item v-if="roamData.verifyDate" nodeTop="2" class="alarm-status">
						<template v-slot:content>
							<view class="step-info" style="margin-top: 0;">验证时间：{{roamData.verifyDate}}</view>
							<view class="step-info">验证部门：{{roamData.verifyPersonName}}<view class="fr">验证人：{{roamData.verifyPersonName}}</view></view>
							<view class="step-info">验证结果：{{roamData.verifyResult}}</view>
							<view class="step-info">验证评价：{{roamData.verifyEvaluation}}</view>
						</template>
					</u-time-line-item>
					<u-time-line-item v-if="roamData.handleDate" nodeTop="2" class="alarm-status">
						<template v-slot:content>
							<view class="step-info" style="margin-top: 0;">处理时间：{{roamData.handleDate}}</view>
							<view class="step-info">处理部门：{{roamData.handleOrgName}}<view class="fr">处理人：{{roamData.handlePersonName}}</view></view>
							<view class="step-info">处理情况：{{roamData.handleInformation}}</view>
							<view  class="step-info">处理情况图片：<img v-if='roamData.handlePicture' 
							v-for='(item,index) in imgList' 
							:key='index'
							@click="()=>lzZoomPic(item)"
							style='margin-right: 10px;'
							:src='showSrc(item)' 
							width='30' height='30' /></view>
						</template>
					</u-time-line-item>
					<u-time-line-item nodeTop="2" v-if="roamData.jcDate" class="alarm-status">
						<template v-slot:content>
							<view class="step-info" style="margin-top: 0;">检查时间：{{roamData.jcDate}}</view>
							<view class="step-info">检查部门：{{roamData.jcOrgName}}<view class="fr">检查人：{{roamData.jcPersonName}}</view></view>
							<view class="step-info">提交问题：{{roamData.wtContent}}</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		
		<view v-show="tab == 0" class="detail" style="margin-top: 20px;padding: 0 0 20px 0;">
			<view class="ac confirm-title"><b v-show="detail.FLOW_STATE == 1">问题处理</b><b v-show="detail.FLOW_STATE == 2">问题验证</b></view>
			<u-radio-group v-model="data_list.status" style="height: 50px;padding: 0 16px;">
				<u-radio v-if="detail.FLOW_STATE == 1" @change="radioChange" :name="1" :disabled="false">处理</u-radio>
				<u-radio v-if="detail.FLOW_STATE == 1" @change="radioChange" :name="2" :disabled="false">无法解决</u-radio>
				<u-radio v-if="detail.FLOW_STATE == 2" @change="radioChange" :name="3" :disabled="false">验证通过</u-radio>
				<u-radio v-if="detail.FLOW_STATE == 2" @change="radioChange" :name="4" :disabled="false">退回继续解决</u-radio>
			</u-radio-group>
			<u-radio-group v-if="detail.FLOW_STATE == 2 && data_list.status == 3" v-model="data_list.verifyResult" style="height: 50px;padding: 0 16px;">
				<u-radio style="margin-right: 40px;" @change="radioChange" name="好" :disabled="false">好</u-radio>
				<u-radio style="margin-right: 40px;" @change="radioChange" name="一般" :disabled="false">一般</u-radio>
				<u-radio @change="radioChange" name="差" :disabled="false">差</u-radio>
			</u-radio-group>
			<view v-if="detail.FLOW_STATE == 1" style="line-height: 36px;padding: 0 16px;"><b>{{data_list.status == 1 ? '处理情况:' : '拒绝原因:'}}</b></view>
			<view v-if="data_list.status == 4" style="line-height: 36px;padding: 0 16px;"><b>退回原因:</b></view>
			<view style="padding: 0 16px;">
				<view style='position: relative;'>
					<textarea maxlength="200" v-if="detail.FLOW_STATE == 1 || data_list.status == 4" v-model="data_list.content" style="width: 100%;border: 1px solid #D7D7D7;padding: 8px;font-size: 14px;"></textarea>
					<view class="fixed">{{data_list.content.length}}/200</view>
				</view>
				<view v-if="detail.FLOW_STATE == 1" class="photo" v-show="data_list.status == 1" style="margin-top: 15px;">
					<u-upload :action="action" @on-success='backImg'></u-upload>
					<!-- <view class=" img-item" v-for="(img,i) in img_list" :key="i"><image class="images" :src="img"></image></view> -->
				</view>
				<button class="cancel-btn" @click="back">取消</button><button class="default-btn fr" @click="pushData">确定</button>
			</view>
		</view>
		
		<view class="zoom-pic ac" v-show="zoom" @click="zoom = false;">
			<img class="imgs" :src="src"></image>
		</view>
		
		<view class="zoom-pic ac" v-show="lzZoom" @click="lzZoom = false;">
			<img class="imgs" :src="lzSrc"></img>
		</view>
		
	</view>
</template>

<script>
export default{
	data() {
		return {
			tab : 0,
			detail : '',
			roamData:{},
			device_options : '',
			action : this.baseUrl()+"/home/uploadImageAppTurnoutForm",
			data_list: {
				"attach": [],  //附件地址
				"content": "",  //备注
				"departId": uni.getStorageSync('departid'), //部门id
				"personId": this.getUserId(), //处理人id
				"status": "1",  //0提交，1处理，2无法解决，3验证通过，4退回继续解决
				"uid": "",  //问题id
				"verifyResult": "好"  //验证结果
			},
			src : '',
			zoom : false,
			lzZoom : false,
			imgList:[],
			imageList:[],
			lzSrc:'',
		}
	},
	created() {
		this.detail = JSON.parse(uni.getStorageSync('question'));
		let item = JSON.parse(uni.getStorageSync('question'))
		try {
			this.imageList = item['HANDLE_PICTURE'].split(',')
		} catch (error) {
			console.error(error)
		}
		for (let k in this.detail) {
			if(k == 'HANDLE_PICTURE') this.detail[k] = this.baseUrl()+this.detail[k].replace(/\\/g,'/');
		}
		this.data_list.uid = this.detail.ID;
		if(this.detail.JC_DATE){
			let date = new Date(this.detail.JC_DATE);
			let str = date.getFullYear() +'/'+ ((date.getMonth()+1) < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) +'/'+ (date.getDate() < 10 ? '0'+date.getDate() : date.getDate())+' '+((date.getHours()+1) < 10 ? '0'+date.getHours() : date.getHours())+':'+(date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())+':'+(date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
			this.detail.JC_DATE = str;
		}
		if(this.detail.ZG_DATE){
			let date = new Date(this.detail.ZG_DATE);
			let str = date.getFullYear() +'/'+ ((date.getMonth()+1) < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) +'/'+ (date.getDate() < 10 ? '0'+date.getDate() : date.getDate())+' '+((date.getHours()+1) < 10 ? '0'+date.getHours() : date.getHours())+':'+(date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())+':'+(date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
			this.detail.ZG_DATE = str;
		}
		// this.data_list.status = this.detail.FLOW_STATE;
		if(this.detail.FLOW_STATE == 2) this.data_list.status = 3;
		this.initOptions();
	},
	methods:{
		lzZoomPic(i) {
			console.log(i)
			this.lzSrc = this.baseUrl()+i;
			this.lzZoom = true;
		},
		showSrc(s){
			return this.baseUrl()+s
		},
		handleClick(){
			let question  = JSON.parse(uni.getStorageSync('question'))
			this.fetch('GET', this.baseUrl() + '/cascoAppWentiController/circulationRecord', {
				id: question.ID
			}, true).then((res) => {
				if (res.returnCode == 1 && res.data != null) {
					console.log(res.data)
					this.roamData = res.data
					this.imgList = res.data.handlePicture.split(',')
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
			this.tab=1
		},
		back() {
			uni.navigateBack();
		},
		backImg(data, index, lists) {
			this.data_list.attach.push(data.data);
		},
		zoomPic(src) {
			this.src = this.baseUrl()+src;
			this.zoom = true;
		},
		setDate(obj) {
			let str = obj.year+'-'+obj.month+'-'+obj.day+' '+obj.hour+':'+obj.minute+':'+obj.second;
			this.date_type ? this.data_list.jcDate = str : this.data_list.zgDate = str;
			this.onCancel();
		},
		// 选中任一radio时，由radio-group触发
		radioChange(e) {
			// console.log(e);
		},
		initOptions() {
			this.fetch('GET',this.baseUrl()+'/home/queryEqtTypeTree2',{}).then((res)=>{
				if(res.returnCode == 1) this.detail.eqt = res.data.find((item)=>{return item.id == this.detail.EQT_ID})
			})
		},
		pushData() {
			if(this.data_list.content == '' && this.detail.FLOW_STATE == 1) return uni.showToast({title:'请输入情况',icon:'none'});
			if(this.data_list.content == '' && this.detail.FLOW_STATE == 2 && this.data_list.status == 4) return uni.showToast({title:'请输入情况',icon:'none'});
			if(this.data_list.attach.length > 0) {
				this.data_list.attach = this.data_list.attach.join(',');
			}else{
				this.data_list.attach = this.data_list.attach.toString();
			}
			this.fetch('POST',this.baseUrl()+'/cascoAppWentiController/handleWenti',this.data_list,true).then((res)=>{
				if(res.returnCode == 1) {
					uni.showToast({title:res.message,icon:'none'});
					setTimeout(()=>{
						uni.navigateTo({
						    url: '/pages/question/index'
						});
					},1500)
				}else{
					uni.showToast({title:res.message,icon:'none'});
				}
			})
		}
	}
}
</script>

<style scoped>
	.fixed{
		position: absolute;
		right: 2px;
		bottom: 2px;
	}
	.detail{
		height: auto;padding-bottom: 16px;margin-top: -170px;padding-top: 15px;
	}
	.job-detail{
		line-height: 45px;
	}
	.detail>.tab{
		margin-top: 15px;
	}
	.detail>.tab>.type{
		line-height: 40px;font-size: 14px;color: #307BE0;width: 120px;border:1px solid #307BE0;display: inline-block;
	}
	.detail>.tab>.on{
		background: #307BE0;color: #fff;border: 1px solid transparent;
	}
	.detail>.text{
		background: #F9FBFE;border: 1px solid #F1F1F1;border-radius: 6px;padding: 10px;font-size: 14px;height: 104px;overflow: auto;
	}
	.detail>.photo{
		overflow-x: auto;width: 100%;height: 100px;white-space: nowrap;
	}
	.detail>.photo>.img-item{
		width: 80px;height: 80px;margin-right: 10px;border-radius: 6px;display: inline-block;vertical-align: middle;
	}
	.detail>.btn{
		width: 91.5%;margin: 0 auto;
	}
	.detail>.btn>button{
		width: 48%;display: inline-block;
	}
	.photo .images{
		width: 80px;height: 80px;
	}
	.confirm-title{
		line-height: 45px;font-size: 14px;color: #fff;background: #307BE0;
	}
	.cancel-btn,.default-btn{
		width: 48%;display: inline-block;margin-top: 20px;
	}
	.alarm-status{
		margin-bottom: 20px;
		padding-bottom: 20px;
		font-size: 16px;border-bottom: 1px solid #F1F1F1;padding-right: 10px;
	}
	.alarm-status .date{
		color: rgba(62, 58, 57, 0.7);font-size: 14px;
	}
	.alarm-status .step-info{
		margin-top: 6px;font-size: 14px;
	}
	.zoom-pic{
		position: fixed;top: 0;left: 0;width: 100%;height: 100vh;line-height: 100vh;background: rgba(0,0,0,0.5);z-index: 100;
	}
	.zoom-pic>.imgs{
		max-width: 100%;max-height: 100vh;vertical-align: middle;
	}
	
	.u-node {
		width: 44rpx;height: 44rpx;border-radius: 100rpx;display: flex;justify-content: center;align-items: center;background: #d0d0d0;
	}
</style>
